CSS UNIT PROJECT

 

DESCRIPTION

 

In an earlier lesson, you created a small simple website using HTML.  You will now alter the website so that it uses CSS for formatting purposes.  You will then create three different CSS files that provide your site with three different looks.  By simply switching the CSS files used, you will instantly switch the look.

 

ORGANIZING CSS FILES

 

In the end, you need 3 different CSS documents.  They should be called:

 

 

To simplify the process of switching over your website to work with a different look, we will also have fourth css file called:

 

 

All html documents should link to the current.css file.  At any time, if you want to switch to a different look, you just copy the content from that look’s css file into current.css.  (The more efficient way would be to duplicate the css file and rename it current.css.)

 

SUGGESTED APPROACH

 

  1. Create a file called current.css. 

  2. Add <link rel="stylesheet" type="text/css" href="current.css" /> to the head section of all your HTML documents.

  3. Change your HTML document to contain only <div class=”?”> tags.  This means removing all paragraph, header, bold tags.

  4. Inside current.css, add rules that will create your first look.  Once happy with that look, copy the content of this file into the file look1.css.

  5. In current.css, make a new look.  Again, once done, copy the css rules in look2.css. 

  6. Do the same for the third look.

 

RUBRIC

 

Communication (5 marks)

 

·        Student will show the site with the 3 looks.

·        Student is able to efficiently switch from one look to another.

·        Student is confident with what he/she is doing while doing demonstration.

·        Student uses proper terminology.

 

Application (5 marks)

 

·        HTML document contains no formatting – so only div tags, no p, h1, b tags...

·        CSS is used to create the looks.

·        No difficulties/problems with the CSS coding.

·        The website is fully functional.

 

Thinking (5 marks)

 

·        Student makes use of resource (w3schools site) to discover new CSS functionality.

·        Student is original in use of CSS.

·        Looks to vary considerably – not just different colours.

 

Knowledge (5 marks)

 

·        A quiz will be given to cover the Knowledge part.